<template>
	<view class="list-page">
		<u-sticky>
			<view class="search-box">
				<u-search placeholder="搜索词条" @change="inputSearch" v-model="keyword" shape="round" bgColor="#ffffff"
					borderColor="#f4f4f4" :clearabled="true" :showAction="false"></u-search>
			</view>
			<view class="nav-box">
				<view class="left">
					<u-tabs lineColor="#FF6005" :current="nav" :inactiveStyle="tabStyle" activeStyle="color:#FF6005"
						:list="navList.product_tts_category" @click="navFun"></u-tabs>
				</view>
				<view class="right" @click="show=true">
					<image style="margin-left: 10rpx;width: 100%; height: 100%;" :src="localIconSrc('shuaixuan.png')">
					</image>
					<!-- <u-icon name="list-dot" color="#878787" size="26" style="margin-left: 10rpx;"></u-icon> -->
				</view>
			</view>
		</u-sticky>

		<view class="list-box">
			<pub-list :list="pubList" @collectFun="collectFun" @typeClick="typeClick"></pub-list>
			<view style="margin-top: 40rpx;" v-if="pubList.length>=8"><u-loadmore :status="loadingStatus" line loadmoreText="上拉加载更多" /></view>
		</view>

		<u-popup :show="show" @close="show=false" :round="8">
			<view class="popup-box">
				<view class="type-box">
					<view class="type-title">类型</view>
					<view class="type-loop">
						<view class="item" @click="navFun({index:index,id:item.id})"
							v-for="(item,index) in navList.product_tts_category" :key="item.id"
							:class="index==index1?'nav-active':''">{{item.name}}</view>
					</view>
				</view>
				<view class="type-box">
					<view class="type-title">语种</view>
					<view class="type-loop">
						<view class="item" :class="index2==-1?'nav-active':''" @click="languageFun(-1,-1)">全部
						</view>
						<view class="item" @click="languageFun(value,index)"
							v-for="(key,value,index) in navList.product_tts_language" :key="value"
							:class="index==index2?'nav-active':''">{{key}}</view>
					</view>
				</view>
				<view class="type-box">
					<view class="type-title">音色</view>
					<view class="type-loop">
						<view class="item" :class="index3==-1?'nav-active':''" @click="timbreFun(-1,-1)">全部
						</view>
						<view class="item" @click="timbreFun(value,index)"
							v-for="(key,value,index) in navList.product_tts_timbre" :key="value"
							:class="index==index3?'nav-active':''">{{key}}</view>
					</view>
				</view>
				<view class="popup-btn">
					<view class="btn btn1" @click="show=false">取消</view>
					<view class="btn btn2" @click="submitFun">确定</view>
				</view>
			</view>
		</u-popup>
		<view class="nodata" v-if="pubList.length<=0" style="margin-top: 200rpx;">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import PubList from '@/components/PubList.vue'
	import {
		pubTypeList,
		pubList,
		collect
	} from "@/api/index.js"
	import index from '../../../uni_modules/uview-ui';
	export default {
		components: {
			PubList
		},
		data() {
			return {
				loadingStatus: 'loadmore',
				keyword: '',
				tabStyle: {
					color: '#666666'
				},
				nav: 0,
				show: false,
				navList: [],
				nav1: '',
				index1: 0,
				nav2: '',
				index2: -1,
				nav3: '',
				index3: -1,
				navIndexArr: [0, -1, -1],
				navValueArr: ['', '', ''],
				pubList: [],
				pageNum: 1
			};
		},
		
		onShareTimeline() {
			return {
				title: '主播列表',
			}
		},
		onShareAppMessage() {
			return {
				title: '主播列表',
				path: '/pages/ai-dub/list/list'
			}
		},
		onPullDownRefresh() {
			uni.showLoading({
				title:'请稍后...'
			})
			this.pageNum = 1
			this.pubList = []
			if (this.index1 == 1) {
				this.collectList()
			} else {
				this.getPubList()
			}
		},

		onReachBottom() {
			this.loadingStatus = "loading"
			this.pageNum++
			if (this.navIndexArr[0] == 1) {
				this.collectList()
			} else {
				this.getPubList()
			}

		},
		onLoad() {
			uni.showLoading({
				title: '请稍后...'
			})
			this.getPubTypeList()
		},
		methods: {
			//搜索
			inputSearch() {
				console.log(this.nav1)
				if (this.nav1 == -2) {

				} else {
					this.pageNum = 1
					this.pubList = []
					uni.showLoading({
						title: '请稍后...'
					})
					this.getPubList()
				}
			},
			typeClick(id) {
				let arr = this.navList.product_tts_category
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].id == id) {
						console.log(i)
						this.nav = i
						this.nav1 = i - 1
						this.pageNum = 1
						this.pubList = []
						this.getPubList()
						break;
					}
				}
			},
			//搜藏/取消
			collectFun(index) {
				if (this.pubList[index].is_collect == 1) {
					this.pubList[index].is_collect = 0
				} else {
					this.pubList[index].is_collect = 1
				}
			},
			//搜藏列表
			collectList() {
				let param = {
					type: 1, //	Int	是	3	产品类型	
					page: this.pageNum, //	Int	否	8	设置当前页，默认1	
					pagesize: 8 //	Int	否	8	每页显示数，默认5
				}
				collect(param).then(res => {
					console.log(res)
					this.loadingStatus = "loadmore"
					if (res && res.data) {
						let arr = res.data.data
						arr.forEach(item => {
							item.is_collect = 1
							item.label = item.label.split(',')
						})
						this.pubList = this.pubList.concat(arr)
						if(this.pubList.length>0 && res.data.data.length<=0){
							this.loadingStatus = "nomore"
						}
					}

					uni.hideLoading()
					setTimeout(() => {
						uni.stopPullDownRefresh()
					}, 1500)
				})
			},
			//navFun导航点击事件
			navFun(e) {
				console.log(e)
				if (e.name) {
					uni.showLoading({
						title:'请稍后...'
					})
					this.pubList = []
					this.pageNum = 1
					this.loadingStatus = "loadmore"
					if (e.id == -2) {
						this.collectList()
						this.nav1 = e.id
						this.index1 = e.index
					} else {
						this.nav1 = e.id
						this.index1 = e.index
						this.getPubList()
					}


				} else {
					this.index1 = e.index
					this.nav1 = e.id
				}

			},
			submitFun() {
				uni.showLoading({
					title: '请稍后...'
				})
				if (this.nav1 == -2) {
					this.nav = 1
					this.pubList = []
					this.pageNum = 1
					this.collectList()
				} else {
					this.nav = this.index1
					this.pubList = []
					this.pageNum = 1
					this.getPubList()
				}


			},
			languageFun(key, index) {
				this.index2 = index
				this.nav2 = index == -1 ? "" : key
			},
			timbreFun(key, index) {
				this.index3 = index
				this.nav3 = index == -1 ? "" : key
			},
			//主播列表
			getPubList() {
				let param = {
					page: this.pageNum, //	Int	是	2	设置页码，默认1	
					pagesize: 8, //	Int	否	3	设置每页显示数，默认最低5条	
					order: 'hot', //	String	否	8	排序，默认最新，hot为热门	hot
					input: this.keyword, //	String	否	32	模糊搜索关键词
					catid: this.nav1 == -1 ? '' : this.nav1, //	Int	否	6	类目ID	
					language: this.nav2, //	Int	否	6	语种 ：10普通话/20英文/30方言/99其他语种	
					timbre: this.nav3, //	Int	否	6	音色： 5男声/10女声/20童声/99老年	
					// cost_type:''//	Int	否	6	计费方式 ：0免费 vip特权 svip超级特权
				}
				pubList(param).then(res => {
					console.log(res)
					this.loadingStatus = "loadmore"
					if (res && res.data) {
						
						res.data.forEach(ele => {
							ele.label = ele.label.split(',')
						})
						
						this.pubList = this.pubList.concat(res.data)
						console.log('this.pubList', this.pubList)
						if(res.data.length<=0 && this.pubList.length>0){
							this.loadingStatus = "nomore"
						}
					}
					
					uni.hideLoading()
					this.show = false
					setTimeout(() => {
						uni.stopPullDownRefresh()
					}, 1500)
				})
			},
			//获取类型
			getPubTypeList() {
				pubTypeList().then(res => {
					res.product_tts_category = [{
						id: -1,
						name: '全部'
					}, {
						id: -2,
						name: '收藏'
					}, ...res.product_tts_category]
					this.navList = res
					this.getPubList()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		width: 100%;
		background-color: #fff;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.nav-active {
		color: #{$main-color} !important;
		border-color: #{$main-color} !important;
	}

	.popup-box {
		height: auto;
		max-height: 80vh;
		overflow-y: scroll;
		padding: 20rpx 20rpx;
		padding-bottom: 60rpx;
		box-sizing: border-box;

		.type-box {
			margin-bottom: 50rpx;

			.type-title {
				font-size: 28rpx;
			}

			.type-loop {
				display: flex;
				flex-wrap: wrap;

				.item {
					border: 1px solid #e2ebe2;
					padding: 18rpx 40rpx;
					box-sizing: border-box;
					border-radius: 50rpx;
					margin: 20rpx 20rpx 0rpx 0;
					font-size: 28rpx;
					color: #999;
				}
			}
		}

		.popup-btn {
			width: 70%;
			margin: auto;
			display: flex;
			justify-content: space-between;
			margin-top: 120rpx;

			.btn {
				width: 200rpx;
				height: 70rpx;
				border-radius: 40rpx;
				font-size: 28rpx;
				text-align: center;
				line-height: 70rpx;
			}

			.btn1 {
				color: #{$main-color};
				border: 1px solid #{$main-color};
			}

			.btn2 {
				color: #fff;
				background-color: #{$main-color};
			}
		}
	}

	.list-page {
		padding-bottom: 60px;
	}

	.nav-box {
		display: flex;
		background-color: #fff;
		height: 90rpx;

		.left {
			width: calc(100% - 80rpx);
		}

		.right {
			width: 60rpx;
			height: 60rpx;
			background-color: #fff;
			margin-top: 18rpx;
		}
	}
</style>